<script setup lang="ts">
import { computed } from 'vue';
import { switchTab } from '@tarojs/taro';
import { useAppStore, useThemeStore, useNursesStore, useConfigStore } from '@/store';
import { storeToRefs } from 'pinia';

const { nurseNurses, openid: nurse_openid } = storeToRefs(useNursesStore());

const tabBarUser = {
    list: [
        // {
        //   pagePath: '/pages/index/index',
        //   text: '首页',
        //   icon: 'i-local-home'
        // },
        // {
        //   pagePath: '/pages/nurses/index',
        //   text: '服务员',
        //   icon: 'i-local-nurse'
        // },
        // {
        //   pagePath: '/pages/orders/index',
        //   text: '服务',
        //   icon: 'i-local-service'
        // },
        // {
        //   pagePath: '/pages/my/index',
        //   text: '个人中心',
        //   icon: 'i-local-my'
        // },
        {
            pagePath: 'pages/index/index',
            text: '首页',
            iconPath: '/assets/ico/home.png',
            selectedIconPath: '/assets/ico/home-fill.png'
        },
        {
            pagePath: 'pages/shop/shop',
            text: '大药房',
            iconPath: '/assets/ico/shop.png',
            selectedIconPath: '/assets/ico/shop-fill.png'
        },
        {
            pagePath: 'pages/leader/leader',
            text: '导诊台',
            iconPath: '/assets/ico/leader.png',
            selectedIconPath: '/assets/ico/leader-fill.png'
        },
        {
            pagePath: 'pages/cart/cart',
            text: '购物车',
            iconPath: '/assets/ico/cart.png',
            selectedIconPath: '/assets/ico/cart-fill.png'
        },
        {
            pagePath: 'pages/my/index',
            text: '我的',
            iconPath: '/assets/ico/my.png',
            selectedIconPath: '/assets/ico/my-fill.png'
        }
    ]
};

// 根据后台配置的 button_dictText 动态控制所有 tabbar 的显示隐藏
const configStore = useConfigStore();
const filteredUserTabs = computed(() => {
    // 获取配置的按钮文本列表（如："首页,导诊台,购物车,我的"）
    const enabledButtons = new Set(configStore.buttonTextList);
    // 只显示配置中包含的 tabbar 项
    return tabBarUser.list.filter(item => enabledButtons.has(item.text));
});

const tabBarNurse = {
    list: [
        {
            pagePath: '/pages/index/index',
            text: '护理首页',
            icon: 'i-local-home'
        },
        {
            pagePath: '/pages/nursesmy/index',
            text: '个人中心',
            icon: 'i-local-my'
        }
    ]
};

const themeStore = useThemeStore();
const theme = computed(() => themeStore.theme);
const themeVars = computed(() => themeStore.themeVars);

const appStore = useAppStore();
const activeTab = computed(() => appStore.getActiveTab);
function tabSwitch(item: any, url: string) {
    appStore.setActiveTab(url);
    switchTab({ url: `/${url}` });
}
</script>
<script lang="ts">
export default {
    options: {
        addGlobalClass: true,
        styleIsolation: 'shared'
    }
};
</script>
<template>
    <nut-config-provider :theme="theme" :theme-vars="themeVars">
        <nut-tabbar :model-value="activeTab" bottom safe-area-inset-bottom @tab-switch="tabSwitch">
            <nut-tabbar-item v-for="item in tabBarNurse.list" v-if="nurseNurses && nurse_openid" :key="`nurse-${item.pagePath}`"
                :name="item.pagePath" :tab-title="item.text">
                <template #icon>
                    <view class="w-25px h-25px flex items-center justify-center">
                        <text class="text-[20rpx]" :class="item.icon"></text>
                    </view>
                </template>
            </nut-tabbar-item>
            <nut-tabbar-item v-for="item in filteredUserTabs" v-else :key="`user-${item.pagePath}`" :name="item.pagePath"
                :tab-title="item.text">
                <template #icon>
                    <image class="w-25px h-25px"
                        :src="activeTab === item.pagePath ? item.selectedIconPath : item.iconPath" />
                </template>
            </nut-tabbar-item>
        </nut-tabbar>
    </nut-config-provider>
</template>
